<template>
  <div id="bidding_materials">
    <div class="dialog_box">
      <div class="left">
        <p
          v-for="(item, index) in materialList"
          :key="index"
          :class="firstIndex == index ? 'on' : ''"
          @click="firstClick(index)"
        >
          <el-checkbox v-model.trim="item.isHave" @change="thirdChange($event, index)"></el-checkbox>
          {{ item.materialName }} -- {{ item.model }}
        </p>
      </div>
      <div class="right">
        <div v-for="(item, index) in materialShowList" :key="index">
          {{ item.materialName }} -- {{ item.model }}
          <i @click="removeMaterial(index)" class="iconfont icon-guanbi"></i>
        </div>
      </div>
    </div>
    <div class="footer">
      <button class="no_btn" @click="closeBtn">取消</button>
      <button class="ok_btn" @click="okBtn">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    taxRate: {
      type: [String, Number]
    },
    biddingId: {
      type: [String, Number],
      require: true
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      firstIndex: null,
      materialList: [],
      materialShowList: [],
      materialShowListCopy: []
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    thirdChange(e, index) {
      if (e) {
        // if (this.list.length && this.list[0]['taxRate']) {
        //   this.$set(this.materialList[index], 'taxRate', this.list[0]['taxRate'])
        // }
        this.materialShowList.push(this.materialList[index])
      } else {
        for (let i = 0; i < this.materialShowList.length; i++) {
          if (this.materialShowList[i].id == this.materialList[index].id) {
            this.materialShowList.splice(i, 1)
          }
        }
      }
    },
    removeMaterial(index) {
      let arr = [...this.materialShowList]
      for (let i = 0; i < this.materialList.length; i++) {
        if (this.materialShowList[index].id == this.materialList[i].id) {
          this.$set(this.materialList[i], 'isHave', false)
          arr.splice(index, 1)
        }
      }
      this.materialShowList = [...arr]
    },
    firstClick(index) {
      this.firstIndex = index
    },
    getListData() {
      this.$https({
        method: 'post',
        url: '/contract/queryBiddingPurchaseList',
        data: {
          id: this.biddingId
        }
      })
        .then(res => {
          if (res.code === 0) {
            this.materialList = res.data
            this.materialList.forEach(item => {
              this.$set(item, 'isHave', false)
              this.$set(item, 'productTypes', 1)
              this.$set(item, 'parameterIndex', '')
              this.$set(item, 'brandOrigin', '')
              this.$set(item, 'taxRate', this.taxRate || null)
              this.$set(item, 'taxes', '')
              this.$set(item, 'totalPrice', '')
              this.$set(item, 'excludingTax', '')
            })
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //物资确认按钮
    okBtn() {
      this.materialShowListCopy = JSON.parse(JSON.stringify(this.materialShowList))
      this.$emit('close', this.materialShowListCopy)
    },
    //取消按钮
    closeBtn() {
      this.$emit('close', [])
    }
  }
}
</script>
<style lang="less" scoped>
.dialog_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .on {
    background-color: #fee3dd;
  }
  .left {
    width: 350px;
    height: 490px;
    overflow-y: auto;
    border: 1px solid #d6d6d6;
    p {
      padding: 10px 20px;
      box-sizing: border-box;
      font-size: 14px;
      cursor: pointer;
    }
  }

  .right {
    width: 400px;
    height: 492px;
    padding: 10px 20px;
    overflow-y: auto;
    box-sizing: border-box;
    border: 1px solid #d6d6d6;
    p {
      padding: 10px 20px;
      box-sizing: border-box;
      font-size: 14px;
      cursor: pointer;
      .el-checkbox {
        float: right;
      }
    }
    div {
      display: inline-block;
      padding: 5px 10px;
      font-size: 14px;
      box-sizing: border-box;
      border: 1px solid #d6d6d6;
      border-radius: 5px;
      margin: 10px 10px;
      .iconfont {
        font-size: 12px;
        cursor: pointer;
      }
      .iconfont:hover {
        color: #fa7355;
      }
    }
  }
}
.footer {
  width: 100%;
  margin-top: 20px;
  text-align: center;
  .no_btn {
    width: 130px;
    height: 32px;
    border: 1px solid #fa7355;
    color: #fa7355;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  .no_btn:hover {
    background-color: #fa7355;
    color: #fff;
  }
  .ok_btn {
    width: 130px;
    height: 32px;
    background-color: #fa7355;
    border-radius: 5px;
    margin-left: 20px;
    color: #fff;
    cursor: pointer;
  }
  .ok_btn:hover {
    background-color: rgba(250, 115, 85, 0.85);
  }
}
</style>
